<template>
  <div class="dashboard-container">
     <!-- 搜索区域-->
      <el-col :xs="24">
          <el-input v-model="lgname" placeholder="请输入登录名" style="width:20%" type="text"></el-input>
          <el-button type="primary" @click="getUserList" icon="el-icon-search">查询</el-button>
          <el-button type="success" @click="addOrUpdateHandle(0)" icon="el-icon-plus">新增</el-button>
      </el-col>
      <!-- 搜索区域-->
      
      <!--数据表格区域-->
 <el-table
    v-loading="listLoading"
    :data="list"
    element-loading-text="Loading"
    border
    fit
    highlight-current-row
  >
    <el-table-column align="center" label="ID" width="140">
      <template slot-scope="scope">
        {{scope.row.id}}
      </template>
    </el-table-column>

    <el-table-column align="center" label="登录名" width="140">
      <template slot-scope="scope">
        {{scope.row.loginname}}
      </template>
    </el-table-column>
   
   <el-table-column align="center" label="用户名" width="140">
      <template slot-scope="scope">
        <span>{{scope.row.username}}</span>
      </template>
    </el-table-column>

    <!-- <el-table-column align="center" label="状态" width="140">
      <template slot-scope="scope">
        {{scope.row.status == 2 ? '可用' : '禁用'}}
      </template>
    </el-table-column> -->

    <el-table-column align="center" label="创建时间" width="140">
      <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span>{{scope.row.createdate}}</span>
      </template>
    </el-table-column>

    <el-table-column align="center" label="操作" width="140">
      <template slot-scope="scope">
        <!--添加绑定事件-->
        <el-button @click="addOrUpdateHandle(scope.row.id)" type="text" size="small">编辑</el-button>
        <!--<el-button type="text" size="small">删除</el-button>-->
        <el-button @click="deleteHandle(scope.row.id)" type="text" size="small">删除</el-button>
      </template>
    </el-table-column>

  </el-table>
      <!--数据表格区域-->

      <!--分页区域-->
      <el-pagination
      background
      layout="prev,pager,next"
      :page-size="pageSize"
      :current-page="pageIndex"
      :total="totalRecoreSum"
      @current-change="checkPage"
      >
      <!--分页区域-->

      </el-pagination>

      <!--弹窗 增加，修改-->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getUserList"></add-or-update>
       
  </div>
</template>

<script>
//引入对象
import { axios } from '@/plugins/axios';
import { mapGetters } from 'vuex';
import addOrUpdate from './user-add-or-update.vue';

export default {
  components:{addOrUpdate},

  data(){
    return{
      list:null,
      listLoading:true,
      lgname:"",
      totalRecoreSum:0,
      pageIndex:1,//当前页码
      pageSize:2,//每页显示数量
      addOrUpdateVisible:false
    }
  },
  created () {
    this.getUserList();
  },
  methods: {
    //页数跟页码，每页显示数量
    init(){
      this.list=[];
      this.totalRecoreSum=0;
      this.pageIndex=1;
      this.pageSize=2;
    },

    //显示下一页
    checkPage(val){
      //alert(this.pageIndex);
      this.pageIndex=val;
      //调用getUserList()方法
      this.getUserList();
    },

    //添加和修改用户
    addOrUpdateHandle(id){
      this.addOrUpdateVisible=true;
      this.$nextTick(()=>{
        //在addOrUpdate方法加载之前传id传进user-add-or-update.vue里面
        this.$refs.addOrUpdate.init(id);
      });
    },

    //删除
    deleteHandle(id){
     this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //异步请求url
          const url='http://localhost:8080/hrm/deleteUser?id='+id;
          //传进url
         this.$axios.post(url).then(function(response){
          //判断
           if(response.data){
             this.message({
                 message:'成功删除',
                  type:'success',
              })
            }
        })
          /*this.$axios.post('http://localhost:8080/hrm/deleteUser?id='+id).then(function(response){
            if(response.data){
              this.message({
                message:'成功删除',
                type:'success',
              })
            }
          })*/
        //刷新列表，调用方法
        this.getUserList()

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },

    //页码
    getUserList(){
      const url=`http://localhost:8080/hrm/findUserByPage?pageIndex=`+this.pageIndex+`&lgname=`+this.lgname;
      var $this=this;
      this.$axios.post(url).then(function(response){
        if(response.data){
          $this.listLoading=false;
          $this.list=response.data.users;
          $this.totalRecoreSum=response.data.model.totalRecoreSum;

        }
      })
    },
    handleClick(){
      
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
